<!--  -->
<template>
<div class="member-page">
  <c-title text="打卡日历" :hide="false" ></c-title>
  <member-info :memberInfo="calendarInfo"></member-info>
  <div class="calendar-content">
    <van-calendar
      :show-title="false"
      :poppable="false"
      :show-confirm="false"
      :show-mark="false"
      :formatter="formatter"
      @select="calendarChange"
      :min-date="minDate"
      
      :style="{ height: '500px' }"
    />
    <!--  :min-date="minDate"  :key="new Date().getTime()"   :min-date="new Date(2024,4,21)" -->
  </div>
  <div class="mb-50"></div>
  <van-popup v-model="recordShow" position="bottom" round :style="{ height: '65%',background:'#F5F5F5' }" >
    <div class="record-main">
      <div class="record-head  flex-a-c flex-j-sb">
        <h3>{{timeTitle}} {{dateStatus == 1 ?'今日已打卡':'暂未打卡'}}</h3>
        <div class="close flex-a-c flex-j-c" @click.stop="recordShow = false">
          <span class="icon-icon_close iconfont"></span>
        </div>
      </div>
      <div class="record-list" v-if="recordDataTest.length > 0">
        <block v-for="(item,index) in recordDataTest" :key="index">
          <record-item :itemObj="item" :key="index" :imgPath="imgPath"></record-item>
        </block>
      </div>
      <van-empty 
        class="custom-image"
        :image="`${imgPath}check-in-rebate/empty.png`"
        description="暂无数据" v-else />
      <div  class="account-btn custom-shadow"  :style="iPnoneBottomBol ? 'padding-bottom: 34px;' : ''">
        <van-button round block type="info"  color="var(--themeBaseColor)"  v-if="dateStatus == 2" @click="partCheck">打卡</van-button>
        <van-button round block type="info"  color="#CFCFCF"  v-if="dateStatus == 1" >今日已打卡</van-button>
        <van-button round block type="info"  color="var(--themeBaseColor)"  v-if="dateStatus == 3" @click="reissueOn" >我要补卡</van-button>
      </div>
      <div class="mb-100"></div>
    </div>
  </van-popup>
</div>
</template>

<script>
import clockCalendar_controller from "./clockCalendar_controller";
export default clockCalendar_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  // .calendar-content ::v-deep .van-calendar__header {
  //   display: none;
  // }
  .calendar-content {
    background-color: #fff;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    margin:0.625rem 0.75rem 1.25rem 0.75rem;
    overflow: hidden;
  }
  ::v-deep .today-class   {
    // background: rgba(241, 83, 83, 0.1);
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    color:#F15353;
    position: relative;
    // padding:0.625rem;
    // width: auto;
    // height: auto;
  }
  .mb-100 {
    height: 6.25rem;
    clear:both;
  }
  ::v-deep .current-class {
    position: relative;
    color:#fff;
    z-index: 1;
  }
 
  ::v-deep .current-class::after {
    content:'';
    width: 2.25rem;
    height: 2.5625rem;
    background: #F15353;
    position: absolute;
    left:50%;
    top:50%;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    transform: translate(-50%,-50%);
    z-index: -1;
  }
  ::v-deep .today-class::after {
    content:'';
    width: 2.25rem;
    height: 2.5625rem;
    background: rgba(241, 83, 83, 0.1);
    position: absolute;
    left:50%;
    top:50%;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    transform: translate(-50%,-50%);
  }
  ::v-deep .reissue-class  .van-calendar__bottom-info {
    color:#F15353;
  }
  .calendar-content ::v-deep .van-calendar__selected-day {
    // background: #F15353;
    // padding:0.625rem;
    // width: auto;
    // height: auto;
    // border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    background-color: transparent;
    color:#00001C;
  }
  .calendar-content ::v-deep  .today-class .van-calendar__selected-day {
    color:#F15353;
  }
  ::v-deep .current-class .van-calendar__selected-day {
    color:#fff;
  }
  .mb-50 {
    height: 3.125rem;
    clear: both;
  }
.record-main {
  padding:1.25rem 0.75rem 2.1875rem 0.75rem;
  .record-head {
    padding:0 0 1rem 0;
    h3 {
      font-weight: bold;
      font-size: 1rem;
      color: #00001C;
    }
    .close {
      width: 1.5rem;
      height: 1.5rem;
      background: #F0F0F1;
      border-radius: 50%;
      .icon-icon_close {
        font-size: 0.875rem;
      }
    }
  }
  .custom-image {
    background-color: #fff;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  }
  .title {
    text-align: left;
    padding:1.25rem 0 0.9375rem 0;
  }
  .custom-shadow {
    box-shadow: 0rem 0 0.3125rem 0.0625rem #F5F5F5;
  }
  .account-btn {
    width:100%;
    background-color: #fff;
    position: fixed;
    left:0;
    bottom:0;
    padding:0.625rem 0.75rem;
  }
}
</style>